<template>
  <div class="content">
    <!-- 店铺收藏 -->
    <!-- <div class="contop">
      <input type="" placeholder="请输入要搜索的店铺名称" /><button>
        店铺搜索
      </button>
    </div> -->
    <!-- 内容list -->
    <div
      v-for="item in shopList"
      class="shopsList container"
      :key="item.shop_id"
      :class="item.mallStatus == 4 ? 'disabled_list' : ''"
    >
      <div class="shopsLeft" @click="goShopDetail(item)">
        <div class="shopsTop">
          <img :src="item.image" alt="" height="100px" width="100px" />
          <div class="hardware">
            <p>{{ item.mallName }}</p>
            <label @click="cancelCollection(item)">取消收藏</label>
            <p>
              <!-- <span>{{ item.mallName }}</span>
              <span>{{ item.volume }}</span> -->
            </p>
          </div>
        </div>
        <p class="praised" v-if="item.mallStatus == 4">店铺已失效</p>
      </div>
      <div class="shopsRight">
        <div
          v-for="item in item.goodslist"
          class="shopsContent"
          :key="item.pro_id"
        >
          <img
            :src="item.thumb"
            alt=""
            height="152px"
            width="183px"
            @click="goDetail(item)"
          />
          <p>{{ item.name }}</p>
          <p>¥{{ item.priceCurrent / 100 }}/{{ item.unit }}</p>
        </div>
      </div>
    </div>
    <div class="paging" v-if="total > 0">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="2"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div v-if="(!shopList || shopList.length == 0) && !loading" class="wrap" >
      <div class="bomContent">
        <img
          alt=""
          height="330px"
          src="../../../../public/images/74.png"
          srcset=""
          width="330px"
        />
        <p>暂时没有您收藏的店铺喲！</p>
      </div>
    </div>
  </div>
</template>

<script>
import { tMallCollectList, cancelMallCollect } from "@/api/mallApi/congLinMall";
export default {
  name: "shopCollect",
  data() {
    return {
      shopList: [],
      currentPage: 1, //分页
      total: 0,
      loading: true,
    };
  },
  created() {
    this.getShopCollect();
  },
  methods: {
    goShopDetail(query) {
      console.log("店铺", query);
      if (query.mallStatus == 2) {
        this.$router.push({
          path: "/mall/storeDetail",
          query,
        });
        // this.$router.push({ path: "/mall/product?id=" + query.goodsId });
      }
    },
    goDetail(query) {
      console.log("商品", query);
      if (query.status == 2) {
        this.$router.push({ path: "/mall/product?id=" + query.id });
      }
    },
    cancelCollection(item) {
      console.log("店铺", item);
      cancelMallCollect({ mallCode: item.mallCode, type: 0 })
        .then((res) => {
          // 判断是否取消成功
          if (res.code === "00000") {
            this.$message.success("取消收藏成功");
            this.getShopCollect();
          }
        })
        .catch((err) => {});
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log(this.currentPage);
      this.currentPage = val;
      this.getShopCollect();
    },
    getShopCollect() {
      let inpurValue = {
        pageSize: 2,
        pageNo: this.currentPage,
      };
      this.loading = true;
      tMallCollectList(inpurValue).then((res) => {
        console.log("店铺收藏", res);
        this.shopList = res.data.rows;
        this.total = res.data.totalRows;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.disabled_list {
  cursor: no-drop;
  filter: grayscale(100%);
}
.container {
  position: relative; /* 设置容器为相对定位 */
}
.container label {
  display: none; /* 初始状态下不显示文本内容 */
  position: absolute; /* 将文本元素放在容器上面 */
  top: 0%;
  left: 0%; /* 水平居中 */
  padding: 8px; /* 添加一些间距 */
  background-color: #1289ff; /* 设置背景色 */
  color: white; /* 设置文字颜色 */
  border-radius: 4px; /* 添加边框圆角 */
  // display: block;
  width: 100px;
  height: 100px;
  text-align: center;
  opacity: 0.8;
  line-height: 4.5;
  font-size: 17px;
  cursor: pointer;
}
.container:hover label {
  display: block; /* 当鼠标悬浮在容器上时显示文本内容 */
}
.content {
  width: 1010px;
  height: 100%;
  background: #fff;
  margin: 20px 0 0 10px;
  .wrap{
    margin-left: 40%;
  }
}
.contop {
  input {
    outline: none;
    width: 438px;
    height: 36px;
    border-radius: 4px;
    border: 2.5px solid #e5e5e5;
    background: #fff;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 14px;
    color: #a0a0a0;
    padding-left: 20px;
  }
  button {
    width: 111px;
    height: 36px;
    background: #f0f0f0;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: #3c3c3c;
    border: #e5e5e5;
    cursor: pointer;
  }
}
.shopsList {
  width: 100%;
  height: 292px;
  border-bottom: 2px solid #efeeee;
  //   background: red;
  margin-top: 20px;
  display: flex;

  .shopsRight {
    display: flex;
    justify-content: space-between;
    width: 135%;

    .shopsContent {
      width: 183px;
      height: 250px;
      //   background-color: aquamarine;
      box-shadow: 1px 1px 1px 1px #fbfafa;

      p:nth-child(2) {
        font-family: "Source Han Sans CN Medium";
        font-weight: 600;
        font-size: 15px;
        color: #2b2b2b;
        overflow: hidden;
        /* 隐藏超出容器大小的部分 */
        white-space: nowrap;
        /* 不换行 */
        text-overflow: ellipsis;
        /* 显示省略号 */
      }

      p:nth-child(3) {
        font-family: "Source Han Sans CN Bold";
        font-weight: 700;
        font-size: 20px;
        color: #ff6b00;
      }
    }
  }

  .shopsLeft {
    width: 448px;
    height: 100%;
    // background: #0479db;
    .praised {
      margin-top: 130px;
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 14px;
      color: #585858;
    }

    .shopsTop {
      display: flex;

      .hardware {
        margin: -5px;

        p:nth-child(1) {
          font-family: "Source Han Sans CN Bold";
          font-weight: 700;
          font-size: 18px;
          color: #1289ff;
          margin-left: 14px;
        }

        p:nth-child(2) span {
          font-family: "Source Han Sans CN";
          font-weight: 400;
          font-size: 14px;
          margin-left: 15px;
          color: #585858;
        }
      }
    }
  }
}
</style>
